<style lang="scss" scoped>
.img {
  width: 100%;
  height: 350px;
  img {
    width: 100%;
    height: 100%;
  }
}
h3 {
  font-size: 20px;
  color: red;
}
p {
  font-size: 16px;
  font-weight: bold;
}
</style>
<template>
  <div>
    <van-nav-bar title="好物推荐" left-text="返回" left-arrow @click-left="$router.go(-1)" />
    <div>
      <div class="img">
        <img :src="v?.image" alt="" />
      </div>
      <div>
        <h3>￥{{ v?.oderprice }}</h3>
        <p>
          {{ v?.title }}
        </p>
      </div>
    </div>
    <div>
      <van-action-bar>
        <van-action-bar-icon icon="chat-o" text="客服" />
        <van-action-bar-icon icon="cart-o" text="购物车" />
        <van-action-bar-icon icon="shop-o" text="店铺"/>
        <van-action-bar-button type="danger" text="加入购物车" @click="onClickButton" />
      </van-action-bar>
    </div>
  </div>
</template>
<script setup lang="ts">
import axios from 'axios'
import { showToast } from 'vant'
import { useRoute, useRouter } from 'vue-router'
import { onMounted, ref } from 'vue'
import { cartStore } from '@/stores/cart';
const {addCart} = cartStore()
const listData = ref([])
const router = useRouter()
const route = useRoute()
const id = route.params.id
const v: any = ref(null)

const DetailList = async () => {
  // 获取数据
  const res = await axios.get(`/api/v1/thingdetail`, { params: { id } })
  v.value = res.data.data
  console.log(v)
}
DetailList()

const onClickButton = () => {
    addCart(v.value!)
    showToast('添加成功')
    router.push('/cart')
}
</script>